<!--
 * @description: 
 * @Author: Islands
 * @Date: 2024-06-18 23:57:17
 * @LastEditTime: 2024-06-22 00:42:49
-->
<script lang="ts" setup>
import { props } from './props';
const { placement, shape, src, name, size } = defineProps(props);

const error = (_e: any) => {
    console.log('图片加载失败触发事件！');
};
</script>
<template>
    <div class="pointer avatar" :class="placement">
        <el-avatar :size="size" :shape="shape" :src="src" :error="error" />
        <h1 class="userName" v-show="name">{{ name }}</h1>
    </div>
</template>
<style lang="scss" scoped>
.avatar {
    padding: 0px 10px;
}
.right {
    display: flex;
    align-items: center;

    .userName {
        margin-left: 10px;
        font-weight: bold;
        font-size: 14px;
        min-width: 40px;
        max-width: 100px;
    }
}
.bottom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;

    .userName {
        max-width: 100px;
        margin-top: 5px;
    }
}
</style>
